<template>
	<view class="content" :style="$theme.pageStyle">

		<u-navbar :bgColor="bgColor">
			<template #left>
				<view class="u-nav-slot" style="display: flex;font-size: 14px;">
				</view>
			</template>
			<template #center>
				<view>{{app_title}}</view>
			</template>
		</u-navbar>

		<!-- #ifdef H5 -->
		<view class="customzw" :style="{ height: TopHeight + 'px'}" style="height: 44px;">
		<!-- #endif -->
			<!-- #ifdef MP -->
			<view class="customzw" :style="{ height: TopHeight + 'px'}" style="height: 88px;">
			<!-- #endif -->
			</view>

			<view class="m-slider">
				<view class="wrap">
					<u-swiper :list="isbanner" height="120" keyName="img" radius="8" indicator indicatorMode="line"
						circular></u-swiper>
				</view>
			</view>

			<view class="m1">
				<view class="muen-box">
					<view class="navslider-box" v-if="navbarShowList.length > 0">
						<swiper class="swiper-type swiper-nav" :indicator-dots="navbarList.length > 10 ? true : false"
							indicator-color="#eaeaea" indicator-active-color="#FE3A33" :duration="500" :style="sliderH">
							<swiper-item v-for="(sliderItem, index) in navbarShowList" :key="index">
								<view class="slider_itemslist rowSta">
									<view class="item colCen" v-for="(item, idx) in sliderItem" :key="idx"
										@click="goUrl(item)">
										<image :src="item.images" :lazy-load="true" mode="aspectFit"></image>
										<view class="desc">{{ item.name }}</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<view class="notice">
				<u-notice-bar :text="notice" direction="column"></u-notice-bar>
			</view>

			<view class="produce_list">
				<view class="view_box">
					<view class="goods-card" v-for="(item, index) in goodsList" :key='index'
						@click="toShopDetail(item)">
						<view class="item fadeInUp">
							<view class="img">
								<u-image width="100%" height="390rpx" border-radius="10px" :src="item.image"></u-image>
								<view class="status">
									<!-- <text class="text-white">{{item.status_name}}</text> -->
									<text class="text-white">{{item.preheat_text}}</text>
									<!-- <text class="text-white">已售罄</text> -->
								</view>
							</view>

							<view class="item_cont">

								<view class="title u-line-2">
									{{item.name}}
								</view>

								<view class="hd" v-if="item.preheat == 1">
									<view class="left">
										<image
											src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/011694017501ToT0bn.gif"
											class="icon"></image>
										<view class="name">开售倒计时</view>
										<u-count-down :time="item.countdownSeconds * 1000" format="HH:mm:ss" autoStart
											millisecond @change="onTimeChange">
											<view class="time">
												<view class="time__custom__day" v-if="timeData.days > 0">
													<text class="time__custom__item__day">{{ timeData.days }} 天</text>
												</view>
												<text class="time__doc" v-if="timeData.days > 0">:</text>
												<view class="time__custom">
													<text
														class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
												</view>
												<text class="time__doc">:</text>
												<view class="time__custom">
													<text class="time__custom__item">{{ timeData.minutes }}</text>
												</view>
												<text class="time__doc">:</text>
												<view class="time__custom">
													<text class="time__custom__item">{{ timeData.seconds }}</text>
												</view>
											</view>
										</u-count-down>
									</view>
								</view>

								<view class="" style="display: flex;">
									<view class="tags">
										<text class="tags_style"
											style="background: #3fda9b;">{{item.departureDuration}}</text>
									</view>
									<view class="tags">
										<text class="tags_style" style="background: #ffbc25;">{{item.age}}岁</text>
									</view>
									<view class="tags">
										<text class="tags_style"
											style="background: #dd524d;">{{item.destination}}</text>
									</view>
								</view>
								<view class="btm">
									<view class="price">
										¥ {{item.price}}
										<!-- <span class="stit">价格不包含营地往返费用</span> -->
									</view>
									<view class="user">

									</view>
								</view>
								<view class="tips">
									<span class="stit">{{item.price_desc}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <uni-load-more :status="status"></uni-load-more> -->

			<view class="coperright">
				@ 南昌匠心软件提供技术支持
			</view>

			<view class="h-200 pb-safe"></view>

			<tabbar />
		</view>
</template>

<script>
	import $H from '@/common/js/request.js';

	export default {
		components: {

		},
		data() {
			return {
				scrollTop: 0,
				isbanner: '',
				navbarList: [],
				goodsList: [],
				bgColor: '#f8f8f8',
				app_title: uni.getStorageSync('app_name'),
				TopHeight: uni.getStorageSync('TopHeight'),
				timeData: {},
				navbarShowList: [],
				notice: [],
				isLoading: false,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		watch: {
			navbarList(nval, oval) {
				let index = 0;
				while (index < nval.length) {
					this.navbarShowList.push(nval.slice(index, (index += 10)));
				}
				if (this.navbarList.length > 5) {
					this.sliderH = 'height:180px;';
				} else {
					this.sliderH = 'height:90px;';
				}
			}
		},
		onLoad(opt) {
			if (opt.scene) {
				uni.setStorageSync('invite_code', opt.scene)
			}
			this.getIndex()
			this.getData()
			if (uni.getStorageSync('token') == '') {
				this.isLogin = 0
			} else {
				this.isLogin = 1
			}
		},
		methods: {
			onTimeChange(e) {
				//console.log(e);
				this.timeData = e
			},
			getData() {
				this.timeer();
			},
			timeer() {
				this.goodsList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.getGoods();
			},
			getGoods(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('index/indexGoods', {
						'page': page,
						'limit': this.limit,
					}, {
						token: false
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								// const startTimeString = list[i].goonsale;
								// // 将 starttime 字段的字符串转换为日期对象
								// const startTime = new Date(startTimeString);
								// // 获取当前时间的日期对象
								// const currentTime = new Date();
								// // 计算倒计时秒数
								// const timeDiff = startTime - currentTime;
								// // 将毫秒转换为秒，并存储在 list[i] 中
								// list[i].countdownSeconds = Math.floor(timeDiff / 1000);
								this.goodsList.push(list[i]);
							}
							this.pages = res.data.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							this.out = 1;
							if (this.page == this.pages || res.data.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			async getIndex() {
				try {
					const res = await $H.post('index/index', {}, {
						token: false
					});
					this.isbanner = res.data.banner
					this.navbarList = res.data.nav
					this.notice = res.data.notice.map(item => item.desc);
				} catch (error) {

				} finally {

				}
			},
			toShopDetail(item) {
				uni.navigateTo({
					url: '/pages/goods/detail?id=' + item.id
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>

<style lang="scss" scoped>
	.m-slider {
		background: #fff;
		margin: 10px;
		border-radius: 8px;
		border-radius: 8px;
	}

	.m1 {
		background: #F8F8F8;
		border-top-left-radius: 25upx;
		border-top-right-radius: 25upx;
		width: 100%;
	}

	.muen-box {
		padding-bottom: 10rpx;
		margin: 10px;
		border-radius: 12rpx;
		background-color: #FFFFFF;

		.navslider-box {

			.swiper-type {
				width: 100%;

				.rowSta {
					display: flex;
					align-items: flex-start;
				}

				.slider_itemslist {
					width: 100%;
					flex-wrap: wrap;
					padding: 20rpx 0;

					.colCen {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.item {
						width: 20%;
						margin-bottom: 5px;
						margin-top: 5px;

						image {
							width: 90rpx;
							height: 90rpx;
							margin-bottom: 10rpx;
						}

						.desc {
							margin-top: 2px;
							font-size: 12px;
							font-weight: 400;
							color: #333333;
						}

					}
				}
			}
		}
	}

	.notice {
		margin: 10px;
		padding: 5px;
		border-radius: 10px;
		background: #fff;
	}


	.produce_list {
		margin-bottom: 40px;
	}

	.view_box {
		margin: 10px;
		background: #fff;
		padding: 5px;
		border-radius: 10px;
	}

	.goods-card .item {
		background-size: 190px 233px;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 1px 12px 1px #f5eaea;
		background-color: #fff;
		margin-bottom: 15px;
	}

	.goods-card .item .img {
		position: relative;
		min-height: 165px;
	}

	.goods-card .item .img .status {
		display: flex;
		align-items: center;
		position: absolute;
		left: 17px;
		top: 26px;
		padding: 4px 6px;
		background: rgba(73, 73, 73, 0.9);
		box-sizing: border-box;
		padding: 2px 10px;
		height: 26px;
		opacity: .8;
		border-radius: 8px;
		font-size: 12px;
		font-weight: 600;
		color: #fff;
	}

	.tags_style {
		margin-right: 5px;
		color: rgb(255, 255, 255);
		font-size: 12px;
		padding: 3px;
		border-radius: 2px 0px 0px 2px;
	}

	.goods-card .item .item_cont {
		border-radius: 0 0 30px 30px;
		padding: 6px 21px 15px 14px;
	}

	.goods-card .item .item_cont .title {
		font-size: 16px;
		font-weight: 600;
		color: #000;
		line-height: 23px;
		margin-bottom: 9px;
	}

	.goods-card .item .item_cont .btm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 11px;
	}

	.goods-card .item .item_cont .btm .user {
		display: flex;
		align-items: center;
	}

	.goods-card .item .item_cont .btm .user text {
		margin-left: 6px;
		font-size: 12px;
		font-weight: 400;
		color: #222;
	}

	.goods-card .item .item_cont .btm .price {
		font-size: 20px;
		font-weight: 900;
		color: #dd524d;
		line-height: 28px;
	}


	.tips .stit {
		font-size: 10px;
		color: #dd524d;
		line-height: 14px;
		font-weight: bold;
	}


	.produce_list {
		margin-bottom: 40px;
	}

	.hd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		margin-bottom: 10px;
		.left {
			display: flex;
			align-items: center;

			.name {
				font-size: 32rpx;
				font-weight: 600;
				color: rgb(252, 60, 62);
				margin-right: 10px;
			}

			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
			}

			.title {
				width: 134rpx;
				height: 33rpx;
			}
		}

		.more {
			font-size: 26rpx;
			color: #999;

			.iconfont {
				margin-left: 6rpx;
				font-size: 25rpx;
			}
		}

	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			width: 22px;
			height: 22px;
			background-color: rgba(252, 60, 62, 0.09);
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__day {
				width: 42px;
				height: 22px;
				background-color: rgba(252, 60, 62, 0.09);
				border-radius: 4px;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
			}

			&__item {
				color: rgb(233, 51, 35);
				font-size: 12px;
				text-align: center;

				&__day {
					color: rgb(233, 51, 35);
					font-size: 12px;
					text-align: center;
				}
			}
		}


		&__doc {
			color: rgb(233, 51, 35);
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}
</style>